<template>
    <div class="shopcar">
        <div class="mui-card" v-for="(item, index) in carlist" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <mt-switch v-model="$store.getters.getSelected[item.id]" @change="getselect(item.id,$store.getters.getSelected[item.id])"></mt-switch>
                    <img :src="item.thumb_path">
                    <div class="con_des">
                        <h3>{{item.title}}</h3>
                        <p>
                            <span>￥{{item.sell_price}}</span>
                            <numbox :id="item.id" :num="$store.getters.getCount[item.id]"></numbox>
                            <a href="javascript:;" @click.prevent="remove(item.id,index)">删除</a>
                        </p>
                    </div>
                </div>
            </div>
		</div>

        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner zongjia">
                    <div class="con_des">
                        <p>总计(不含运费)</p>
                        <p>已勾选商品
                            <span>{{$store.getters.getAll.count}}</span>件，总价：
                            <span>￥{{$store.getters.getAll.allMoney}}</span>
                        </p>
                    </div>
                    <div class="con_des">
                        <mt-button type="danger" size="large">去结算</mt-button>
                    </div>
                </div>
            </div>
		</div>
       
    </div>
    
</template>

<script>
    import numbox from '../soncomponents/car_numbox.vue'
    import {Toast} from 'mint-ui'
    export default {
        data () {
            return {
                carlist:[]
            }
        },
        created() {
            this.getshopcarlist();
        },
        methods: {
            //购物车列表数据
            getshopcarlist(){
                var carId = this.$store.getters.getCarId;
                this.$http.get('api/goods/getshopcarlist/'+carId.join(',')).then(res=>{
                    if(res.body.status==0){
                        console.log(res.body.message);
                        this.carlist = res.body.message
                    }else{
                        Toast('请求失败')
                    }
                })
           },
           //删除购物车列表
           remove(id,val){
               //当前页面删除
               this.carlist.splice(val,1);
               //从数据库（本地缓存）删除
               this.$store.commit('delShopCar',id)
           },
           //选中状态的事件
           getselect(id,val){
               this.$store.commit('updataSelect',{
                   id:id,
                   selected:val
               })
           }
        },
        components: {
            numbox
        }
    }
</script>

<style lang="scss" scoped>
.shopcar{
    .mui-card-content-inner{
        display: flex;
        align-items: center;
        padding: 10px 5px;
        img{
            width: 60px;
            height: 60px;
            margin: 0 3px;
        }
        .con_des{
            h3{
                font-size: 14px;
            }
            p{
                margin: 0;
                span{
                    color: red;
                    font-weight: bold;
                    font-size: 16px;
                }
                a{
                    float: right;
                }
            }
            
        }
    }
    .zongjia{
        justify-content: space-between;
    }
}
</style>